import TreeTable from 'vue-table-with-tree-grid'
import CateEdit from './components/cate-edit.vue'
import {
    cateListApi,
    cateDeleteApi
} from '@/api/cate'
export default {
    components: {
        TreeTable,
        CateEdit
    },
    data() {
        return {
            // 查询条件
            queryInfo: {
                type: 3, // 所有分类都查询
                pagenum: 1, // 当前页码
                pagesize: 5 // 每页查询的记录数
            },
            total: 0, // 总记录数
            // 分页分类数据列表(1,2,3)
            cateList: [],
            // 列属性
            columns: [{
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    // 当前列为自定义列表(插槽的形式去显示当前列)
                    type: 'template',
                    // isDelete是模板名字，可以理解是插槽名字
                    template: 'isDelete'
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'sort'
                },
                {
                    label: '操作',
                    // 当前列为自定义列表(插槽的形式去显示当前列)
                    type: 'template',
                    // opt是插槽的名字
                    template: 'opt'
                }
            ],
            // 所有的数据
            allList: JSON.parse(sessionStorage.getItem('allList') || '[]')
        }
    },
    created() {
        // 获取所有的分类数据
        this.getCateList()
        this.getAllCateList()
    },
    computed: {
        //  将树状数据转换为列表数据
        list() {
            return this.treeToList(this.allList)
        }
    },
    methods: {
        // 将树状数据转换为列表数据
        treeToList(datas) {
            const arr = []
            formateData(datas)

            function formateData(datas) {
                for (const i in datas) {
                    arr.push({
                        cat_id: datas[i].cat_id,
                        cat_name: datas[i].cat_name,
                        cat_pid: datas[i].cat_pid,
                        cat_level: datas[i].cat_level
                    })
                    if (datas[i].children) {
                        formateData(datas[i].children)
                    }
                }
            }
            return arr
        },
        // 获取所有的数据
        async getAllCateList() {
            if (sessionStorage.getItem('allList')) {
                console.log('读缓存')
            } else {
                const res = await cateListApi({
                    type: 3
                })
                console.log('请求api')
                if (res.meta.status !== 200) {
                    return this.$message.error('获取分类数据失败')
                }
                this.allList = res.data.result
                sessionStorage.setItem('allList', JSON.stringify(this.allList))
            }
        },
        // 获取分页数据
        async getCateList() {
            const res = await cateListApi(this.queryInfo)
            if (res.meta.status !== 200) {
                return this.$message.error('获取分类数据失败')
            }
            this.total = res.data.total
            this.cateList = res.data.result
        },
        // 每页显示条数发生改变时触发
        handleSizeChange(pagesize) {
            this.queryInfo.pagesize = pagesize
            this.getCateList()
        },
        // 当前页码发生改变时触发
        handleCurrentChange(pagenum) {
            this.queryInfo.pagenum = pagenum
            this.getCateList()
        },
        // 打开分类添加对话框
        openAddDialog() {
            this.$refs.cateEditRef.open()
        },
        // 分类添加成功后的处理动作
        handleCateAdd() {
            // 获取分页的一、二、三级数据
            this.getCateList()

            // 重新拿所有的数据
            sessionStorage.removeItem('allList')
            this.getAllCateList()
        },
        // 分类删除
        async cateDel(row) {
            // 如果有子分类不能直接删除，否则可以直接删除
            if (row.children && row.children.length > 0) {
                return this.$message.error('当前分类有子分类，请先删除子分类再进行删除')
            }
            const res = await cateDeleteApi(row.cat_id)
            if (res.meta.status !== 200) return this.$message.error('删除分类失败!')
            this.$message.success('删除分类成功')
            this.getCateList()

            // 重新拿所有的数据
            sessionStorage.removeItem('allList')
            this.getAllCateList()
        },
        // 打开分类修改的对话框
        openEditDialog(row) {
            this.$refs.cateEditRef.open(row)
        }
    }
}